<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>病人信息录入</title>
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body style="margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; background-color: #f0f7ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px;">
    <div style="background-color: white; border-radius: 16px; box-shadow: 0 10px 25px rgba(22, 93, 255, 0.1); padding: 40px; max-width: 800px; width: 100%;">
        <!-- 返回首页按钮 -->
        <button id="homeBtn" style="background-color: #f0f7ff; color: #165DFF; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 20px;">
            <i class="fa fa-home"></i> 返回首页
        </button>

        <div style="text-align: center; margin-bottom: 30px;">
            <i class="fa fa-user-md" style="color: #165DFF; font-size: 48px;"></i>
            <h2 style="color: #333; font-size: 28px; margin-top: 15px;">病人信息录入</h2>
            <p style="color: #666;">请填写以下病人基本信息和病房信息</p>
        </div>

        <!-- 病人信息表单 -->
        <form id="patientForm">
            <div style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
                <h3 style="color: #165DFF; font-size: 20px; margin-top: 0; margin-bottom: 20px;">病人基本信息</h3>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    <!-- 病人ID -->
                    <div>
                        <label for="patientID" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">病人ID <span style="color: red;">*</span></label>
                        <input type="number" id="patientID" name="patientID" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 病人姓名 -->
                    <div>
                        <label for="patientName" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">病人姓名 <span style="color: red;">*</span></label>
                        <input type="text" id="patientName" name="patientName" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 病人年龄 -->
                    <div>
                        <label for="patientAge" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">病人年龄 <span style="color: red;">*</span></label>
                        <input type="number" id="patientAge" name="patientAge" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 病人性别 -->
                    <div>
                        <label for="patientGender" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">病人性别 <span style="color: red;">*</span></label>
                        <select id="patientGender" name="patientGender" required 
                                style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                            <option value="">请选择性别</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                            <option value="3">其他</option>
                        </select>
                    </div>
                    
                    <!-- 病因 -->
                    <div>
                        <label for="illness" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">病因 <span style="color: red;">*</span></label>
                        <input type="text" id="illness" name="illness" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 心率 -->
                    <div>
                        <label for="heart_rate" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">心率(次/分) <span style="color: red;">*</span></label>
                        <input type="number" id="heart_rate" name="heart_rate" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 氧气 -->
                    <div>
                        <label for="O2" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">血氧饱和度(%) <span style="color: red;">*</span></label>
                        <input type="number" id="O2" name="O2" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                </div>
            </div>
            
            <div style="border: 1px solid #ddd; border-radius: 8px; padding: 20px;">
                <h3 style="color: #165DFF; font-size: 20px; margin-top: 0; margin-bottom: 20px;">病房及医生信息</h3>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    <!-- 病房ID -->
                    <div>
                        <label for="roomID" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">病房ID <span style="color: red;">*</span></label>
                        <input type="number" id="roomID" name="roomID" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 主治医生ID -->
                    <div>
                        <label for="doctorID" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">主治医生ID <span style="color: red;">*</span></label>
                        <input type="number" id="doctorID" name="doctorID" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 主治医生姓名 -->
                    <div>
                        <label for="doctorName" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">主治医生姓名 <span style="color: red;">*</span></label>
                        <input type="text" id="doctorName" name="doctorName" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                    
                    <!-- 住院时间 -->
                    <div>
                        <label for="time" style="display: block; color: #666; font-size: 14px; margin-bottom: 5px;">住院时间 <span style="color: red;">*</span></label>
                        <input type="date" id="time" name="time" required 
                               style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
                    </div>
                </div>
            </div>
            
            <!-- 提交按钮 -->
            <div style="text-align: center; margin-top: 30px;">
                <button type="submit" style="background-color: #165DFF; color: white; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px;">
                    提交信息
                </button>
            </div>
        </form>
    </div>

    <!-- 成功提示框 -->
    <div id="successModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center;">
        <div style="background-color: white; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; text-align: center;">
            <div style="font-size: 24px; color: #4CAF50; margin-bottom: 15px;">✓</div>
            <h3 style="font-size: 20px; color: #333; margin-bottom: 10px;">提交成功</h3>
            <p style="color: #666; margin-bottom: 20px;">病人信息已成功提交至服务器</p>
            <button id="closeModal" style="padding: 10px 15px; background-color: #165DFF; color: white; border: none; border-radius: 4px; cursor: pointer;">
                确定
            </button>
        </div>
    </div>

    <!-- 错误提示框 -->
    <div id="errorModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center;">
        <div style="background-color: white; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; text-align: center;">
            <div style="font-size: 24px; color: #f44336; margin-bottom: 15px;">✗</div>
            <h3 style="font-size: 20px; color: #333; margin-bottom: 10px;">提交失败</h3>
            <p id="errorMessage" style="color: #666; margin-bottom: 20px;">提交过程中发生错误</p>
            <button id="closeErrorModal" style="padding: 10px 15px; background-color: #165DFF; color: white; border: none; border-radius: 4px; cursor: pointer;">
                确定
            </button>
        </div>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const form = document.getElementById('patientForm');
            const homeBtn = document.getElementById('homeBtn');
            const successModal = document.getElementById('successModal');
            const closeModal = document.getElementById('closeModal');
            const errorModal = document.getElementById('errorModal');
            const closeErrorModal = document.getElementById('closeErrorModal');
            const errorMessage = document.getElementById('errorMessage');

            // 返回首页按钮功能
            homeBtn.addEventListener('click', function() {
                // 这里可以添加返回首页的逻辑
                if (confirm('确定要返回首页吗？未保存的数据将会丢失。')) {
                    window.location.href = 'index.html'; // 修改为实际的首页URL
                }
            });

            // 表单提交功能
            form.addEventListener('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交行为
                submitPatientData(); // 提交病人数据
            });

            // 关闭模态框
            closeModal.addEventListener('click', function() {
                successModal.style.display = 'none';
            });

            closeErrorModal.addEventListener('click', function() {
                errorModal.style.display = 'none';
            });

            // 提交病人数据到服务器
            function submitPatientData() {
                // 从表单中获取所有输入值
                const patientData = {
                    patientID: parseInt(document.getElementById('patientID').value),
                    patientName: document.getElementById('patientName').value,
                    patientAge: parseInt(document.getElementById('patientAge').value),
                    patientGender: parseInt(document.getElementById('patientGender').value),
                    illness: document.getElementById('illness').value,
                    heart_rate: parseInt(document.getElementById('heart_rate').value),
                    O2: parseInt(document.getElementById('O2').value),
                    roomID: parseInt(document.getElementById('roomID').value),
                    doctorID: parseInt(document.getElementById('doctorID').value),
                    doctorName: document.getElementById('doctorName').value,
                    time: document.getElementById('time').value
                };

                // 按照要求的JSON格式构建数据
                const formattedData = {
                    "patient": [
                        {
                            "key": 101,
                            "name": "patientID",
                            "type": 3,
                            "value": patientData.patientID
                        },
                        {
                            "key": 102,
                            "name": "patientName",
                            "type": 4,
                            "value": patientData.patientName
                        },
                        {
                            "key": 103,
                            "name": "patientAge",
                            "type": 3,
                            "value": patientData.patientAge
                        },
                        {
                            "key": 104,
                            "name": "patientGender",
                            "type": 3,
                            "value": patientData.patientGender
                        },
                        {
                            "key": 105,
                            "name": "illness",
                            "type": 4,
                            "value": patientData.illness
                        },
                        {
                            "key": 106,
                            "name": "heart_rate",
                            "type": 3,
                            "value": patientData.heart_rate
                        },
                        {
                            "key": 107,
                            "name": "O2",
                            "type": 3,
                            "value": patientData.O2
                        },
                        {
                            "key": 108,
                            "name": "roomID",
                            "type": 3,
                            "value": patientData.roomID
                        },
                        {
                            "key": 109,
                            "name": "doctorID",
                            "type": 3,
                            "value": patientData.doctorID
                        },
                        {
                            "key": 110,
                            "name": "doctorName",
                            "type": 4,
                            "value": patientData.doctorName
                        },
                        {
                            "key": 111,
                            "name": "time",
                            "type": 4,
                            "value": patientData.time
                        }
                    ]
                };

                // 显示提交的数据
                console.log('提交的数据:', formattedData);
                
                // 使用send函数发送数据
                send(formattedData);
            }

            // 发送数据到服务器的函数
            function send(data) {
                // 实际项目中请替换为真实的API地址
                var url = ""; 
                
                // 创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                
                // 配置请求：POST方法、异步请求
                xhr.open("POST", url, true);
                
                // 设置请求头，指定请求体格式为JSON
                xhr.setRequestHeader('Content-Type', 'application/json');
                
                // 监听请求状态变化
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) { // 请求已完成
                        if (xhr.status === 200) { // 请求成功
                            // 解析JSON响应
                            var response = JSON.parse(xhr.responseText);
                            console.log("响应数据:", response);
                            
                            // 显示成功提示
                            successModal.style.display = 'flex';
                        } else { // 请求失败
                            // 显示错误提示
                            errorMessage.textContent = `提交失败: HTTP错误 ${xhr.status}`;
                            errorModal.style.display = 'flex';
                        }
                    }
                };
                
                // 处理网络错误
                xhr.onerror = function() {
                    errorMessage.textContent = '提交失败: 网络错误';
                    errorModal.style.display = 'flex';
                    console.error('发送数据失败');
                };
                
                // 使用send()方法发送JSON数据
                xhr.send(JSON.stringify(data));
            }
        });
    </script>
</body>
</html>